<template>
	<view class="money">
		<view class="w96 radius20 bgwhite" style="padding:40rpx;">
			<!-- <text style="color: #96ee53;">3</text><text>位师傅正在查看</text> -->
			<view class="mt20" style="color: #cbcbcb;font-size: 24rpx;padding: 0 60rpx;">
				<view class="" style="text-align:center;margin-bottom: 20rpx;font-size: 26rpx;">
					账户金额
				</view>
				<view class="" style="text-align:center;margin: 20rpx 0;font-size: 50rpx;">
					{{info.money || 0}}
				</view>
				<view class="flex-between">
					<view class=""
						style="border: 1px solid #ccc;width: 48%;height: 40px;border-radius: 20px;text-align: center;line-height: 40px;">
						提现
					</view>
					<view class=""
						style="border: 1px solid #ccc;width: 48%;height: 40px;border-radius: 20px;text-align: center;line-height: 40px;background-color: #CEEE5B;">
						充值
					</view>
				</view>
			</view>
		</view>
		<view class="mt20 w96 radius20 bgwhite" style="height:80vh;">
			<view class="" style="text-align:left;padding: 30rpx;">
				余额变动明细
			</view>
			<scroll-view scroll-y="true" :scroll-top="0" class="scroll_views" @scrolltolower="lower" @scroll="scroll"
				refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100"
				refresher-background="lightgreen" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @refresherabort="onAbort">
				<view class="flex-row" style="padding: 30rpx;" v-for="i in lists" :key="i.id">
					<view class="flex">
					<!-- 	<view class="" style="width: 80rpx;height: 80rpx;border-radius: 50%;background-color: #CEEE5B;">
							<image src="@/static/lg.png" mode="" style="width: 100%;height:100%;"></image>
						</view> -->
						<view class="" style="padding-left: 30rpx;">
							<view class="" style="font-size:30rpx">
								{{i.memo}}
							</view>
							<view class="" style="font-size:26rpx;margin-top: 10rpx;color: #ccc;">
								{{format( i.createtime*1000) ||'2024-11-29 15:01:11'}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="" style="font-size:32rpx;color: red;text-align: center;">
							{{i.money||'+1000'}}元
						</view>
						<view class="" style="font-size:24rpx;margin-top: 10rpx;color: #ccc;">
							余额:{{i.after||5500.00}}元
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		moneylog
	} from '@/common/teacherReq.js'
	export default {
		data() {
			return {
				lists: [],
				page: 0,
				total: 0,
				triggered: false,
				isNull: false,
			};
		},
		computed: {
			info() {
				return uni.getStorageSync('info')
			}
		},
		onLoad() {
			this.getList(0)
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},
		methods: {
			getList(page) {
				moneylog({
					page
				}).then(res => {
					console.log('res: ', res);
					if (res.data.length) {
						this.lists = this.lists.concat(res.data)
						// this.total = res.data.total
					} else {
						this.isNull = true
					}
				})
			},
			lower(e) {
				if (this.isNull) {
					uni.showToast({
						title: '没有更多了',
						icon: 'error'
					})
					return
				}
				this.page += 1
				this.getList(this.page)
			},
			scroll(e) {
				// console.log(e, 'scroll')
			},
			onPulling(e) {
				// console.log("onpulling", e);
			},
			async onRefresh() {
				if (this._freshing) return;
				this.total = 0
				this.page = 0
				this.lists = []
				this.isNull = false
				this._freshing = true;
				await this.getList(this.page)
				this.triggered = false;
				this._freshing = false;
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			onAbort() {
				console.log("onAbort");
			},
			format(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始，所以要加1
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
				const formattedDate = `${year}年${month}月${day}日   ${hours}:${formattedMinutes}`;
				return formattedDate

			}
		}
	}
</script>

<style lang="scss">
	.money {
		background: linear-gradient(to bottom, #CEEE5B, #fff);
		height: 100vh;
		// margin: 0;
		padding-top: 20rpx;
	}
</style>